<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import type { PinsProps, PinsResData } from './types';
import { getPexelsFromId } from '@/api';
import { isMobileTerminal } from '@/utils';
import { useRouterStore } from '@/store';

const props = defineProps<PinsProps>();
const router = useRouter();
const routerStore = useRouterStore();
const pexels = ref<Partial<PinsResData>>({});

async function getPexelsData() {
  const res = await getPexelsFromId<PinsResData>(props.id);
  pexels.value = res;
}

getPexelsData();
</script>

<template>
  <div
    class="backdrop-blur-4xl fixed top-0 left-0 z-20 h-full w-full overflow-y-auto bg-transparent pb-2 text-xl xl:p-2"
  >
    <MNavBar sticky v-if="isMobileTerminal">
      <template #default>{{ pexels.title }}</template>
      <template #right>
        <MSvgIcon
          name="share"
          class="h-3 w-3"
          fillClass="fill-zinc-900 dark:fill-zinc-200"
        />
      </template>
    </MNavBar>
    <MSvgIcon
      v-else
      name="close"
      class="absolute top-2 right-2 ml-1 h-3 w-3 cursor-pointer rounded-sm p-0.5 duration-200 hover:bg-zinc-100"
      fillClass="fill-zinc-400"
      @click="
        () => {
          routerStore.changeRouterType('back');
          router.back();
        }
      "
    />
    <div
      v-if="pexels._id"
      class="xl:mx-auto xl:flex xl:h-full xl:w-[80%] xl:rounded-lg"
    >
      <img
        class="mb-2 w-full xl:h-full xl:w-3/5 xl:rounded-tl-lg xl:rounded-bl-lg"
        :src="pexels.photo"
        alt=""
      />
      <div
        class="xl:h-full xl:w-2/5 xl:rounded-tr-lg xl:rounded-br-lg xl:bg-white xl:p-3 xl:dark:bg-zinc-900"
      >
        <div v-if="!isMobileTerminal" class="mb-2 flex w-full justify-between">
          <MSvgIcon
            name="share"
            class="duration h-4 w-4 cursor-pointer rounded hover:bg-zinc-200 dark:hover:bg-zinc-800"
          />
          <MButton
            type="info"
            icon="heart"
            iconClass="fill-zinc-900 dark:fill-zinc-200"
          />
        </div>
        <p
          class="ml-1 text-base font-bold text-zinc-900 xl:mb-5 xl:text-xl dark:text-zinc-200"
        >
          {{ pexels.title }}
        </p>
        <div class="mt-1 flex items-center px-1">
          <img v-lazy="pexels.avatar" class="h-3 w-3 rounded-full" alt="" />
          <span class="ml-1 text-base text-zinc-900 dark:text-zinc-200">{{
            pexels.author
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
